<template>
    <div class="main-box">
        <sliders class="main-slider" :class="toggle ? 'main-slider-toggle' : ''"
        :toggle="toggle"
        ></sliders>
        <div class="right-content" :class="{toggleRight: toggle}">
            <headers></headers>
            <div class="contents">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
import sliders from './Slider'
import headers from './Headers'

import {mapGetters} from 'vuex'
export default {
  name: 'mains',
  components: {
      sliders,
      headers
  },
  data () {
      return {}
  },
  computed: {
      ...mapGetters({
          toggle: 'common/getToggle'
      })
  }
}
</script>
<style lang="less" scoped>
.main-box {
    width: 100%;
    height: 100%;
    display: flex;
    .main-slider {
        width: 200px;
        height: 100%;
        background: #003E6B;
        &.main-slider-toggle {
            width: 90px;
        }
    }
    .right-content {
        height: 100%;
        width: calc(100% - 200px);
        background: #EBEFF4;
        &.toggleRight {
            width: calc(100% - 90px);
        }
        .contents {
            height: calc(100% - 60px);
            overflow-y: scroll;
            padding: 20px;
        }
    }
}
</style>